<template>
  <div>
    <form style="width: 40%;height: 200px;padding: 50px; margin-bottom: 100px;float: left;" id="sub">
      <div class="form-group">
        <label>规格</label>
        <input type="text" class="form-control" name="standards" >
      </div>
      <div class="form-group">
        <label >色号</label>
        <input type="text" class="form-control" name="color" >
      </div>
      <div class="form-group">
        <label >米数</label>
        <input type="text" class="form-control" name="number" >
      </div>
      <button @click="submit" class="btn btn-default" style="border:solid">Submit</button>
  </form>
  
  <div id="qrcodeCanvas" style="position: relative;float: left;top: 20px;"></div>
  </div>
</template>

<script>
import $ from 'jquery/dist/jquery'
import QRCode from'qrcodejs2/qrcode'
export default {
  data(){
    return{}
  },
  methods:{
        utf16to8(str) {
              var out, i, len, c;  
              out = "";  
              len = str.length;  
              for(i = 0; i < len; i++) {  
              c = str.charCodeAt(i);  
              if ((c >= 0x0001) && (c <= 0x007F)) {  
                  out += str.charAt(i);  
              } else if (c > 0x07FF) {  
                  out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));  
                  out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));  
                  out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
              } else {  
                  out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));  
                  out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));  
                }  
              }  
              return out;  
          },
          qrCode(str){
            document.getElementById('qrcodeCanvas').innerHTML = ''
            new QRCode('qrcodeCanvas', {width: 200,height: 200,image: '',text:str});
          },
          submit(){
            var formData = $('form[id="sub"]').serializeArray()
            this.qrCode(formData[0].value);
            window.event.returnValue = false;
          }
  }
}
</script>

<style lang="css" scoped>

</style>